<template>
  <a-modal
    :title="dialogTile"
    :width="800"
    :confirm-loading="loading"
    :mask-closable="false"
    :destroy-on-close="true"
    v-model="dialogVisible"
    @ok="confirmBtn('ruleFormValidated')"
    @cancel="handleCancel"
  >
    <a-form-model
      ref="ruleFormValidated"
      :model="formValidated"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="name" label="分红池名称" prop="name">
        <a-input style="width: 60% !important" v-model="formValidated.name" placeholder="请输入分红池名称" />
      </a-form-model-item>
      <a-form-model-item ref="rate" label="分红池比例" prop="rate">
        <a-input-number
          style="width: 60% !important"
          v-model="formValidated.rate"
          :min="0"
          :max="100"
          :step="1"
          :formatter="(value) => `${value}%`"
          :parser="(value) => value.replace('%', '')"
          suffix="%"
        />
        <div class="tips">每天总池实时金额*比例，进入本分池。</div>
      </a-form-model-item>
      <a-form-model-item label="达成条件类型" prop="condition_type">
        <a-radio-group v-model="formValidated.condition_type">
          <a-radio :value="1"> 全部达成 </a-radio>
          <a-radio :value="2"> 部分条件达成 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="达成条件" prop="condition">
        <div class="condition">
          <a-switch style="margin: 0 8px" v-model="formValidated.condition.self_buy_goods.is_open" />
          第 <a-input style="width: 50px; margin: 0 8px" v-model="formValidated.condition.self_buy_goods.start" /> ~
          <a-input style="width: 50px; margin: 0 8px" v-model="formValidated.condition.self_buy_goods.end" />
          名，购买了指定商品之一
          <a-button style="margin: 0 8px" @click="selectProductItem('self_buy_goods')">选商品</a-button>
        </div>
        <div class="condition">
          <a-switch style="margin: 0 8px" v-model="formValidated.condition.spread_buy_goods.is_open" />
          累计直推
          <a-input style="width: 50px; margin: 0 8px" v-model="formValidated.condition.spread_buy_goods.spread_num" />
          人，购买了指定商品之一
          <a-button style="margin: 0 8px" @click="selectProductItem('spread_buy_goods')">选商品</a-button>
        </div>
        <div class="condition">
          <a-switch style="margin: 0 8px" v-model="formValidated.condition.cycle_buy_goods.is_open" />
          周期新增直推
          <a-input style="width: 50px; margin: 0 8px" v-model="formValidated.condition.cycle_buy_goods.spread_num" />
          人，购买了指定商品之一
          <a-button style="margin: 0 8px" @click="selectProductItem('cycle_buy_goods')">选商品</a-button>
        </div>
        <div class="condition">
          <a-switch style="margin: 0 8px" v-model="formValidated.condition.specify_user.is_open" />
          指定会员 <a-button style="margin: 0 8px" @click="selectUsers('specify_user')">选会员</a-button>
        </div>
        <div class="condition">
          <a-switch style="margin: 0 8px" v-model="formValidated.condition.see_ad_num.is_open" />
          <span v-if="!formValidated.condition.see_ad_num.is_open">定时发放</span>
          <div v-else>
            任务发放， 看 <a-input style="width: 50px" v-model="formValidated.condition.see_ad_num.num" /> 条广告
          </div>
        </div>
      </a-form-model-item>
      <a-form-model-item label="分红周期" prop="cycle_type">
        <a-radio-group v-model="formValidated.cycle_type">
          <a-radio :value="1"> 每月 </a-radio>
          <a-radio :value="2"> 每周 </a-radio>
          <a-radio :value="3"> 每天 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="是否禁用" prop="status">
        <a-radio-group v-model="formValidated.status">
          <a-radio :value="1"> 开启 </a-radio>
          <a-radio :value="0"> 禁用 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="前端显示" prop="is_display">
        <a-radio-group v-model="formValidated.is_display">
          <a-radio :value="1"> 显示 </a-radio>
          <a-radio :value="0"> 不显示 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="图标" prop="ico">
        <cyyUploadImg
          @uploadSuccess="
            (e) => {
              formValidated.ico = e.data
            }
          "
          @deleteImg="formValidated.ico = ''"
          :imgSrc="formValidated.ico"
        />
      </a-form-model-item>
      <a-form-model-item label="分红池说明" prop="detail">
        <WangEditor ref="editor" :value="desc" @change="descChange"></WangEditor>
        <a-textarea :hidden="true" v-model="desc" />
      </a-form-model-item>
    </a-form-model>

    <productList ref="productList" @getGoodsIds="getGoodsIds" />
    <userList ref="userList" @getUserIds="getUserIds" />
  </a-modal>
</template>

<script>
import form from './form'
export default {
  ...form,
}
</script>

<style scoped lang="scss">
::v-deep .ant-editor-wang .w-e-text-container {
  height: 200px !important;
}
::v-deep .w-e-text {
  min-height: 200px !important;
}
.condition {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.condition:last-child {
  margin-bottom: 0;
}
</style>
